<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" :key="toUpdateTableKey" @selection-change="handleSelectionChange"
            ref="tabList" :row-key="getRowKeys">
            <el-table-column type="selection" width="55" :reserve-selection='true'>
            </el-table-column>
            <el-table-column v-for="(item,index) in tableGroup" :key="item.label" :label="item.name"
                :min-width="item.width"
                :show-overflow-tooltip="item.label != 'produceProgress' || item.label != 'workerOrderProgress'">
                <template slot-scope="scope">
                    <code v-if="item.label == 'produceProgress' || item.label == 'workerOrderProgress'">
                        <el-progress :percentage="scope.row[item.label] * 100"></el-progress>
                    </code>
                    <code v-else>
                        {{scope.row[item.label]}}
                    </code>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row, 'edit')">编辑
                    </el-button>
                    <el-button type="text" size="small" @click="edit(scope.row, 'copy')">复制</el-button>
                    <el-popconfirm placement='top' confirm-button-text='删除' @confirm='assemblyDelFn({ids:scope.row.id})' title="确认删除装配工单？
                        操作将同时删除关联的工单、任务和报工，删除后不可恢复">
                        <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size='100'></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes,jumper"
            :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        getList,
        assemblyDel,
        assemblyDetail
    } from '@/api/assemblyWorkOrderController'
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
                total: 0,
                toUpdateTableKey: false,
                multipleSelection: []
            }
        },
        props: {
            tableGroup: {
                type: Array,
                default: () => []
            },
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        watch:{
            multipleSelection(selection){
                if(selection.length === 0) this.$refs.tabList.clearSelection()
            }
        },
        methods: {
            //列表
            getListFn: async function (data) {
                this.loading = true
                const res = await getList(data)
                if (res.code === 200) {
                    this.tableData = res.data
                    this.tableData.forEach((item,i) => {
                        item.index = (data.page - 1) * 10 + (i + 1)
                    })
                    this.total = res.count
                }
                this.loading = false
            },
            //删除
            assemblyDelFn: async function(data){
                const {countTableDelLastLinePage} = this.utils
                this.searchForm.page = countTableDelLastLinePage(this.total,this.searchForm.page,this.searchForm.limit)
                await assemblyDel(data)
                this.handleCheckState(data.ids)
                this.getListFn(this.searchForm).then(()=>{
                    this.utils.showMsg('删除成功', 'success')
                })
            },
            //删除后重置勾选状态
            handleCheckState(ids){
                let toggleArr = ids.toString().split(',')
                toggleArr.forEach(i => {
                    let toggleIndex = this.multipleSelection.findIndex(k => i == k.id)
                    toggleIndex != -1 && this.multipleSelection.splice(toggleIndex,1)
                })
            },
            //编辑--复制
            edit(row, url) {
                this.$router.push({
                    path: `/productionManagement/assembleOrder/${url}`,
                    query: {
                        id: row.id,
                        code: row.code
                    }
                })
            },
            getRowKeys(row) {
                return row.id
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection
                this.$emit('getCheckedId', selection.map(i => i.id).toString())
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getListFn(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getListFn(this.searchForm)
            },
            updateTable() {
                this.toUpdateTableKey = !this.toUpdateTableKey
            }
        },
    }
</script>

<style lang="less" scoped>
    .tableList {
        padding: 0 20px;

        code {
            font-family: sans-serif;

            ::v-deep .el-progress__text{
                margin-left: 20px;
            }
        }
    }
</style>